<template>
	<view class="header-title" :style="{'--background': startColor}">
		<slot>内容...</slot>
	</view>
</template>

<script>
export default {
	data() {
		return {
		}
	},
	props: {
		startColor: {
			type: String, default: "#ff7817"
		},
		endColor: {
			type: String, default: "#fd521b"
		}
	},
	methods: {
	}
}
</script>

<style lang="scss">
.header-title {
	position: relative;
	z-index: 0;
	overflow: hidden;
	min-height: 200rpx;
}
.header-title::after {
  content: '';
  width: 120%;
  height: 200rpx;
  position: absolute;
  left: -10%;     //椭圆左边隐藏10%，右边隐藏10%
  top: 0;
  border-radius: 0 0 70% 70%;  //左上角，右上角，右下角，左下角
  background: linear-gradient(to top, var(--background), #fd521b);//var(--background);
  z-index: -1;
}
</style>
